<!--
 * @Author: Tommy Chen
 * @Date: 2023-03-16
 * @LastEditors: Tommy Chen
 * @LastEditTime: 2024-07-11
 * @FilePath: /macc.admin.vue/src/project/authSys/views/quickCreate/portalAuthCreator/portalPage/index.vue
 * @Description: Poral选择部分组件
-->
<template>
  <div>
    <CommonPanel
      :title="$t('portalAuth.portalPage')"
      :showLocalPortalTip="true"
    >
      <div>
        <a-button
          type="primary"
          style="margin-bottom: 16px"
          @click="addPortal()"
        >
          {{ $t('portalAuth.addPortal') }}
        </a-button>
        <div
          v-show="currentPortalType === 'my'"
          class="demo-infinite-container"
        >
          <a-list
            :data-source="groupPortals"
            class="portal-wrapper"
            :loading="portalLoding"
          >
            <a-list-item
              slot="renderItem"
              slot-scope="item"
              :class="[getSelectedClass(item)]"
            >
              <div class="portal-item">
                <icon-font class="select-item__icon" type="ic-input-done" />
                <div class="portal-item-body">
                  <img
                    @click="onClickPortalItem(item)"
                    class=""
                    :src="maccUrl + item.snapShot + '?' + new Date().getTime()"
                  />
                </div>
                <div class="portal-item-title">
                  {{ item.name || item.devPortalName }}

                  <a-dropdown
                    :trigger="['click']"
                    placement="topRight"
                    slot="extra"
                  >
                    <a
                      class="ant-dropdown-link"
                      href="#"
                      v-show="currentPortalType === 'my'"
                    >
                      <icon-font type="ic-more2" />
                    </a>
                    <a-menu slot="overlay" class="portal-menu">
                      <a-menu-item>
                        <a href="javascript:;" @click="onClickToEdit(item)">
                          <icon-font type="ic-edit" />{{ $t('common.edit') }}
                        </a>
                      </a-menu-item>
                      <a-menu-item>
                        <a href="javascript:;" @click="onClickToDel(item)">
                          <icon-font type="ic-delete" />{{
                            $t('common.delete')
                          }}
                        </a>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </div>
              </div>
            </a-list-item>
            <div v-if="portalLoding" class="demo-loading-container">
              <a-spin />
            </div>
          </a-list>
        </div>
      </div>
    </CommonPanel>

    <PortalModal ref="portalModal" />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { requestHttp, maccApi } from '@utils/index';
import CommonPanel from './commonPanel';
import PortalModal from './portalModal';
import authSysMixin from '@project/authSys/mixin/authSysMixin';
export default {
  // directives: { infiniteScroll },
  name: 'portalPage',
  mixins: [authSysMixin],
  components: {
    PortalModal,
    CommonPanel,
  },
  props: {
    record: {
      typeof: Object,
      default: () => {
        return null;
      },
    },
    isConverting: {
      typeof: Boolean,
      default: false,
    },
    convertRecord: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // portalIndex: 0,
      // busy: false,
      visible: false,
      devSn: '',
      currentPortalType: 'my', // my/shared/local
      currentPortalId: '',
      authDeviceType: '',
      portalTypes: [
        {
          value: 'my',
          txt: this.$t('portalAuth.currPrj'),
        },
        {
          value: 'shared',
          txt: this.$t('portalAuth.sharePrj'),
        },
      ],
      portals: [], // 当前显示的portals
      groupPortals: [], // 自己的Portals
      portalLoding: false,
      devMaccPortalId: '',
    };
  },
  computed: {
    ...mapState('User', ['tenantInfo']),
    maccUrl() {
      return location.origin;
    },
  },

  async mounted() {
    // this.initView();
  },

  methods: {
    resetPage() {
      this.currentPortalId = '';
    },
    getPortalId() {
      if (this.currentPortalId === '') {
        this.$message.warning(this.$t('portalAuth.selectTIp'));
      }
      return this.currentPortalId;
    },
    async initView() {
      await this.getPortalList();
      if (this.record) {
        this.currentPortalId = this.record.portalId;
      }
    },
    async onClickToEdit(item) {
      const api =
        maccApi.PORTAL_DETAIL_GET_API.replace(
          '{tenant_name}',
          this.tenantInfo.tenantName
        ).replace('{group_id}', this.groupId) +
        `?ishttps=true&tenantId=${this.tenantInfo.tenantId}&portalId=${item.uuid}`;

      const { code, msg, maccPortalInfo, smsInfo } = await requestHttp({
        api,
        method: 'GET',
        params: {},
      });
      if (code === 0) {
        this.$refs.portalModal.show({
          portalId: item.uuid,
          maccPortalInfo,
          smsInfo,
        });
      } else {
        this.$message.warning(msg);
      }
    },

    /**
     * 点击刷新后重新
     */
    async onClickToDel(item) {
      this.zhugePoint('macc-hotspotPolicy删除Portal页面', {
        workId: 'maccFunApply',
        funcId: 'macc-hotspotPolicy',
      });

      if (item.isShare || item.uuid === this.currentPortalId) {
        this.$message.warning(this.$t('portalAuth.notDel'));
        return;
      }

      this.$confirm({
        content: this.$t('portalAuth.deleteTip'),
        okText: this.$t('common.ok'),
        cancelText: this.$t('common.cancel'),
        centered: true,
        onOk: () => {
          this.doDelete(item);
        },
      });
    },

    async doDelete(item) {
      const api =
        maccApi.PORTAL_DEL_API.replace('{portal_id}', item.uuid) +
        `?ishttps=true&tenantId=${this.tenantInfo.tenantId}&group_id=${this.groupId}`;

      const { code, msg } = await requestHttp({
        api,
        method: 'DELETE',
        params: {},
      });
      if (code === 0) {
        this.getPortalList();
      } else {
        this.$message.warning(msg);
      }
    },

    addPortal() {
      this.$refs.portalModal.show();
    },

    getSelectedClass(item) {
      if (item.uuid && this.currentPortalId === item.uuid) {
        return 'select-item';
      } else if (
        item.devPortalId &&
        this.currentDevPortalId === item.devPortalId
      ) {
        return 'select-item';
      }
      return '';
    },

    onClickPortalItem(item) {
      this.currentPortalId = item.uuid;
    },

    /**
     * @description: 获取云端的设备列表
     * @return {*}
     */
    async getPortalList() {
      this.groupPortals = [];
      this.portalLoding = true;
      const { code, list, msg } = await requestHttp({
        // tommy 24.6.9 api这里使用的是旧ui的接口
        api: maccApi.SAM_TRANSFER_PORTAL_GET_API,
        method: 'GET',
        querys: {
          start: 0,
          pageSize: 100,
          ishttps: true,
          tenantId: this.tenantInfo.tenantId,
        },
        replaces: {
          tenantName: this.tenantInfo.tenantName,
          groupId: this.groupId,
        },
      });
      this.portalLoding = false;
      if (code != 0) {
        this.$message.warning(msg);
      } else {
        // tommy 24.6.9 api这里使用的是旧ui的接口，list可能为空
        this.groupPortals = list || [];
        this.$store.commit('PortalAuth/SET_PORTALS', this.groupPortals);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.dev-portal-radio {
  display: block;
  height: 30px;
  line-height: 30px;
}
.demo-loading-container {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}
.demo-infinite-container {
  padding-right: 16px;
}
.select-item__icon {
  border-radius: 4px 0 4px 0;
  background: #2b6afd;
  color: white;
  width: 32px;
  height: 24px;
  top: 0;
  left: 0;
  font-size: 18px;
  line-height: 30px;
  display: none;
  z-index: 1;
  position: absolute;
}
.portal-menu {
  width: 160px;
  .anticon {
    margin-right: 8px;
  }
}
.select-item {
  /deep/ .ant-card-bordered {
    border-color: #0099ff;
  }
  .select-item__icon {
    display: block;
  }
}
.portal-wrapper {
  /deep/ .ant-list-items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: 'row';
  }
  /deep/ .ant-card-body {
    padding: 0 8px 8px;
    height: 400px;
  }
  /deep/ .ant-card-head {
    min-height: auto;
    border-bottom: 0;
  }
  /deep/ .ant-card-head-title {
    padding: 0;
    font-size: 14px;
    text-align: center;
  }
  /deep/ .ant-card-extra {
    padding: 8px 0;
  }
}
.portal-item {
  border: 1px solid @border;
  padding: 8px;
  border-radius: 8px;
  width: 270px;
  position: relative;
  margin-right: 16px;
}
.select-item {
  .portal-item {
    border: 2px solid @mainColor;
    padding: 7px;
  }
}
.portal-item-body {
  height: 400px;
  img {
    width: 100%;
    height: 100%;
  }
}
.portal-item-title {
  margin-top: 8px;
  text-align: center;
  font-weight: bold;
}
.ant-dropdown-link {
  transform: rotate(90deg);
  color: #999;
  position: absolute;
  right: 4px;
  bottom: 10px;
  font-weight: normal;
}

.ant-list-split .ant-list-item {
  border: none;
}
</style>
